<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<!--无论发布在哪、如何修改源码，请勿删除本行原作者信息，感谢-->
	<meta name="author" content="开发者列表：暮光：城中城，项目地址：https://gitee.com/zyplayer/zyplayer-doc" />
	<title>grpc文档管理系统</title>
	<link rel="shortcut icon" href="webjars/doc-grpc/img/grpc.png"/>
	<link rel="stylesheet" href="webjars/doc-grpc/css/element-ui.css">
	<link rel="stylesheet" href="webjars/doc-grpc/css/doc-grpc.css" />
</head>
<body>
	<div id="app">
		<el-container style="height: 100%;">
			<el-aside width="auto" style="height: 100%;">
				<div class="logo" @click="aboutDialogVisible = true">zyplayer-doc-grpc</div>
				<div style="padding: 10px;">
<!--					<div align="center"><el-button type="primary" v-on:click="reloadService" icon="el-icon-refresh" style="width: 100%;">重新加载服务列表</el-button></div>-->
					<el-input v-model="searchKeywords" placeholder="搜索文档" style="margin: 10px 0;">
						<el-button slot="append" icon="el-icon-search" v-on:click="searchByKeywords"></el-button>
					</el-input>
					<el-tree :data="pathIndex" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
				</div>
			</el-aside>
			<el-container>
				<el-tabs type="border-card" style="width: 100%;">
					<el-tab-pane label="接口说明">
						<div v-if="!grpcInfo.service">
							请先选择服务
						</div>
						<el-form v-else label-width="80px">
							<el-form-item label="服务：">
								{{grpcInfo.service}}
							</el-form-item>
							<el-form-item label="方法：">
								{{grpcInfo.method}}
							</el-form-item>
<!--							<el-form-item label="说明：">-->
<!--								<div v-if="grpcInfoExplainShow">-->
<!--									<pre>{{grpcInfo.docInfo.explain}}<el-button @click.prevent="grpcInfoExplainShow = false;" style="float: right;">编辑</el-button></pre>-->
<!--								</div>-->
<!--								<div v-else>-->
<!--									<el-input type="textarea" :rows="4" placeholder="维护人员、使用说明、便于搜索的信息" v-model="docInfoExplainInput"></el-input>-->
<!--									<el-button @click.prevent="grpcInfoExplainShow = true;" style="float: right;margin: 5px;">取消</el-button>-->
<!--									<el-button type="primary" @click.prevent="saveDocInfoExplain" style="float: right;margin: 5px;">保存</el-button>-->
<!--								</div>-->
<!--							</el-form-item>-->
							<el-form-item label="参数：">
								<div v-html="grpcInfo.paramColumn"></div>
							</el-form-item>
							<el-form-item label="返回值：">
								<div v-html="grpcInfo.resultColumn"></div>
							</el-form-item>
<!--							<el-form-item label="结果：">-->
<!--								<div v-if="grpcInfoResultShow">-->
<!--									<pre>{{grpcInfo.docInfo.result}}<el-button @click.prevent="grpcInfoResultShow = false;" style="float: right;">编辑</el-button></pre>-->
<!--								</div>-->
<!--								<div v-else>-->
<!--									<el-input type="textarea" :rows="4" placeholder="结果集说明等" v-model="docInfoResultInput"></el-input>-->
<!--									<el-button @click.prevent="grpcInfoResultShow = true;" style="float: right;margin: 5px;">取消</el-button>-->
<!--									<el-button type="primary" @click.prevent="saveDocInfoResult" style="float: right;margin: 5px;">保存</el-button>-->
<!--								</div>-->
<!--							</el-form-item>-->
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="在线调试">
						<div v-if="!grpcInfo.service">
							请先选择服务
						</div>
						<div v-loading="onlineDebugLoading" v-else>
							<el-input placeholder="请输入内容" v-model="grpcInfo.function" class="input-with-select">
								<el-button slot="append" @click.prevent="requestExecute">执行</el-button>
							</el-input>
							<el-form label-width="100px" label-position="top">
								<el-form-item label="请求参数：">
									<el-input type="textarea" :rows="20" placeholder="请求参数" v-model="paramColumnRequest"></el-input>
								</el-form-item>
								<el-form-item label="请求结果：">
									<div v-html="requestResult"></div>
								</el-form-item>
							</el-form>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-container>
		</el-container>
		<el-dialog title="关于zyplayer-doc-grpc" :visible.sync="aboutDialogVisible" width="600px">
			<el-form>
				<el-form-item label="项目地址：">
					<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>
				</el-form-item>
				<el-form-item label="开发人员：">
					<a target="_blank" href="http://zyplayer.com">暮光：城中城</a>
				</el-form-item>
				<template v-if="upgradeInfo.lastVersion">
					<el-form-item label="当前版本：">{{upgradeInfo.nowVersion}}</el-form-item>
					<el-form-item label="最新版本：">{{upgradeInfo.lastVersion}}</el-form-item>
					<el-form-item label="升级地址：">
						<a target="_blank" :href="upgradeInfo.upgradeUrl">{{upgradeInfo.upgradeUrl}}</a>
					</el-form-item>
					<el-form-item label="升级内容：">{{upgradeInfo.upgradeContent}}</el-form-item>
				</template>
				<el-form-item label="">
					欢迎加群讨论，QQ群号：466363173，欢迎提交需求，欢迎使用和加入开发！
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" src="webjars/doc-grpc/vue/vue.js"></script>
<script type="text/javascript" src="webjars/doc-grpc/js/element-ui.js"></script>
<!-- ajax 用到了jquery -->
<script type="text/javascript" src="webjars/doc-grpc/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="webjars/doc-grpc/js/common.js"></script>
<script type="text/javascript" src="webjars/doc-grpc/js/toast.js"></script>
<script type="text/javascript" src="webjars/doc-grpc/js/formatjson.js"></script>
<script type="text/javascript" src="webjars/doc-grpc/js/doc-grpc-tree.js"></script>

<script>
	var app = new Vue({
		el: '#app',
		data() {
			return {
				isCollapse: false,
				aboutDialogVisible: false,
				onlineDebugLoading: false,
				pathIndex: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// 展示的信息
				grpcInfo: {},
				grpcInfoExplainShow: true,
				docInfoExplainInput: "",
				grpcInfoResultShow: true,
				docInfoResultInput: "",
				// 请求的IP端口下拉选项
				requestResult: "",
				// 依据目录树存储的map全局对象
				treePathDataMap: new Map(),
				// dubbo列表
				grpcDocList: [],
				dubboDocMap: [],
				// 搜索的输入内容
				searchKeywords: "",
				docParamList: [],
				docParamRequestList: [],
				paramColumnRequest: "",
				// 参数类型选项
				paramTypeOptions: [{
					value: 'java.lang.String'
				}, {
					value: 'java.lang.Long'
				}, {
					value: 'java.lang.Integer'
				}],
				paramTypeValue: "java.lang.String",
				// 升级信息
				upgradeInfo: {},
			}
		},
		watch: {
		
		},
		mounted: function () {
			// 无论发布在哪、如何修改源码，请勿删除本行原作者信息，感谢
			console.log("%c项目信息：\n项目地址：https://gitee.com/zyplayer/zyplayer-doc", "color:red");
			this.doGetServiceList();
			this.checkSystemUpgrade();
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleNodeClick(data) {
				if (data.children == null) {
					console.log(data);
					var path = data.interface;
					this.createDocInfo(path, data.method);
				}
			},
			createDocInfo(path, method) {
				var grpcInfo = app.treePathDataMap.get(path);
				var paramColumn = app.columnMap[grpcInfo.paramType];
				var resultColumn = app.columnMap[grpcInfo.resultType];
				grpcInfo.method = method;
				grpcInfo.function = path;
				grpcInfo.docInfo = {};
				var paramColumnTemp = this.columnToJsonString(paramColumn || {});
				app.paramColumnRequest = JSON.stringify(paramColumnTemp, null, 4);
				grpcInfo.paramColumn = this.processObjectToHtmlPre(paramColumnTemp);
				var resultColumnTemp = this.columnToJsonString(resultColumn || {});
				grpcInfo.resultColumn = this.processObjectToHtmlPre(resultColumnTemp);
				// 清空再赋值才会重新渲染
				app.grpcInfo = {};
				app.grpcInfo = grpcInfo;
				// app.docInfoExplainInput = grpcInfo.docInfo.explain;
				app.docParamList = [];
				// app.docParamList = grpcInfo.docInfo.params || [];
				this.createDocParamRequestList();
				// 请求相关
				app.requestResult = "";
			},
			columnToJsonString(columns){
				var param = {};
				if(!!columns.param && columns.param.length > 0) {
					param = this.columnArrToJsonString(columns.param);
				}
				return param;
			},
			columnArrToJsonString(columns) {
				var param = {};
				for (var i = 0; i < columns.length; i++) {
					var item = columns[i];
					if (!!item.param && item.param.length > 0) {
						param[item.name] = this.columnArrToJsonString(item.param);
					} else {
						if (item.type == 'int') {
							param[item.name] = 0;
						} else {
							param[item.name] = "";
						}
					}
				}
				return param;
			},
			reloadService(){
				ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/reloadService", "post", "json", {}, function (json) {
					if (validateResult(json)) {
						app.$message({
							message: '加载成功！',
							type: 'success'
						});
						app.doGetServiceList();
					}
				});
			},
			searchByKeywords() {
				app.pathIndex = createTreeViewByTreeWithMerge(app.grpcDocList, app.searchKeywords);
			},
			doGetServiceList() {
				ajaxTemp("zyplayer-doc-grpc/service", "post", "json", {}, function (json) {
					if (validateResult(json)) {
						app.grpcDocList = json.data.serviceList || [];
						app.columnMap = json.data.columnMap || {};
						app.pathIndex = createTreeViewByTreeWithMerge(app.grpcDocList);
					}
				});
			},
			saveDocInfoExplain(){
				this.doSaveDocInfo(app.docInfoExplainInput, null, null, true);
			},
			saveDocInfoResult(){
				this.doSaveDocInfo(null, null, app.docInfoResultInput, true);
			},
			saveDocInfoParam() {
				var docParamList = [];
				for (var i = 0; i < app.docParamList.length; i++) {
					var item = app.docParamList[i];
					if (isNotEmpty(item.paramType)) {
						docParamList.push(item);
					}
				}
				var paramsJson = JSON.stringify(docParamList);
				this.doSaveDocInfo(null, paramsJson, null, true);
			},
			createDocParamRequestList() {
				var docParamList = [];
				for (var i = 0; i < app.docParamList.length; i++) {
					var item = app.docParamList[i];
					if (isNotEmpty(item.paramType) || isNotEmpty(item.paramDesc)) {
						docParamList.push(item);
					}
				}
				app.docParamRequestList = docParamList;
			},
			doSaveDocInfo(explain, params, result, showSuccess){
				var param = {
					service: app.grpcInfo.interface,
					method: app.grpcInfo.method,
					resultType: app.grpcInfo.resultType,
					paramValue: app.grpcInfo.paramValue,
					version: app.grpcInfo.docInfo.version || 0,
					explain: explain,
					result: result,
					paramsJson: params,
				};
				ajaxTemp("zyplayer-doc-dubbo/doc-dubbo/saveDoc", "post", "json", param, function (json) {
					if (validateResult(json)) {
						app.dubboDocMap[json.data.function] = json.data;
						app.grpcInfo.docInfo = json.data;
						app.grpcInfoExplainShow = true;
						app.grpcInfoResultShow = true;
						app.docParamList = json.data.params || [];
						app.createDocParamRequestList();
						if (showSuccess) {
							Toast.success("保存成功！");
						}
					}
				});
			},
			addDocParam() {
				var leadAdd = app.docParamList.length <= 0;
				if (!leadAdd) {
					var last = app.docParamList[app.docParamList.length - 1];
					if (isNotEmpty(last.paramType) || isNotEmpty(last.paramDesc)) {
						leadAdd = true;
					}
				}
				if (leadAdd) {
					app.docParamList.push({
						paramName: '',
						paramType: '',
						paramDesc: '',
						paramValue: '',
					});
				}
			},
			requestExecute() {
				var fuc = app.grpcInfo.function;
				var docService = app.grpcInfo.docService;
				var service = fuc.substring(0, fuc.lastIndexOf("."));
				var method = fuc.substring(fuc.lastIndexOf(".") + 1, fuc.length);
				var paramColumnRequest = JSON.stringify(JSON.parse(app.paramColumnRequest));
				var param = {
					docService: docService,
					method: method,
					params: paramColumnRequest,//JSON.stringify(params),
				};
				app.requestResult = "";
				app.onlineDebugLoading = true;
				ajaxTemp("zyplayer-doc-grpc/execute", "post", "json", param, function (json) {
					app.onlineDebugLoading = false;
					if (json.errCode == 200) {
						app.requestResult = app.processObjectToHtmlPre(json.data);
						//var paramsJson = JSON.stringify(app.docParamRequestList);
						//app.doSaveDocInfo(null, paramsJson, null, false);
					} else {
						app.requestResult = json;
					}
				});
			},
			processObjectToHtmlPre(data){
				var requestResult = "";
				try {
					requestResult = Formatjson.processObjectToHtmlPre(JSON.parse(data), 0, false, false, false, false);
				} catch (e) {
					try {
						requestResult = Formatjson.processObjectToHtmlPre(data, 0, false, false, false, false);
					} catch (e) {
						requestResult = data;
					}
				}
				return requestResult;
			},
			checkSystemUpgrade() {
				ajaxTemp("system/info/upgrade", "post", "json", {}, function (json) {
					if (json.errCode == 200 && !!json.data) {
						app.upgradeInfo = json.data;
						console.log("zyplayer-doc发现新版本："
							+ "\n升级地址：" + json.data.upgradeUrl
							+ "\n当前版本：" + json.data.nowVersion
							+ "\n最新版本：" + json.data.lastVersion
							+ "\n升级内容：" + json.data.upgradeContent
						);
					}
				});
			},
		}
	});

</script>
<style>
	html,body,#app {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	pre{margin: 0;}
	.el-menu {
		box-sizing: border-box;
		border-right: 0;
		margin-right: 3px;
	}
	.el-tree{
		margin-right: 3px;
	}
	.el-tree-node__content{
		padding-right: 20px;
	}
	.el-tabs--border-card>.el-tabs__content{
		height: calc(100vh - 100px);overflow-y: auto;
	}
	.logo{
		background: url("webjars/doc-grpc/img/grpc-bg.png") no-repeat; cursor: pointer;
		width: 100%; height:60px;line-height:60px;font-size: 25px;color: #fff;text-align: center;
	}
</style>
</html>

